<template>
  <div class="header">
    <div>
      <sidler-menu />
      <el-divider direction="vertical" />
      <depart-menu />
    </div>
    <div>
      <user-menu />
    </div>
  </div>
</template>


<script lang="ts" setup>
import UserMenu from "./menus/UserMenu.vue";
import SidlerMenu from "./menus/SidlerMenu.vue";
import DepartMenu from "./menus/DepartMenu.vue";

import { DefineComponent, defineComponent } from "vue-demi";

defineComponent<DefineComponent>({
  UserMenu,
  DepartMenu,
  SidlerMenu
});
</script>


<style lang="less" scoped>
.header {
  background: #fff;
  height: 70px;
  // box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
  border-bottom: 1px #00000011 solid;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 45px 0 15px;
  font-size: 15px;
  position: relative;
  z-index: 100;
}
</style>